<template>
  <div class="join main-body">
    <div class="join-title">
      <el-row>
        <el-col :span="10">
          <img src="../../../../assets/img/template-item2/icons/zhuangshileft.png" alt="">
        </el-col>
        <el-col :span="4">
          <h2>招商加盟</h2>
        </el-col>
        <el-col :span="10">
          <img src="../../../../assets/img/template-item2/icons/zuangshiright.png" alt="">
        </el-col>
      </el-row>
    </div>
    <div class="join-body clearfix">
      <div class="join-step">
        <img src="../../../../assets/img/template-item2/icons/join_jpg_fivestep.png" alt="">
      </div>
      <div class="recommend left">
        <h2>加盟推荐</h2>
        <div class="recommend-brand clearfix">
          <div v-for="i in 7" :key="i">
            <div class="brand left">
              <img src="../../../../assets/img/template-item2/brands/2.png" alt="">
            </div>
            <div class="virtual left" @mouseover="showTouch" @mouseout="showTouch">
              <img src="../../../../assets/img/template-item2/brands/weblogo_icon_logo.png" alt="">
              <div v-show="onTouch" class="touch">
                <p>虚位以待 &nbsp; 联系我们</p>
                <span>110</span>
              </div>
            </div>
          </div>

        </div>
        <button>查看更多</button>
      </div>
      <div class="line right">
        <p>轻松一步，靠近财富</p>
        <div class="treasure">
          <el-form ref="from" :model="form" label-position="left" :rules="rules" :hide-required-asterisk="true">
            <el-form-item label="姓名:" prop="name">
              <el-input
                v-model="form.name"
              />
            </el-form-item>
            <el-form-item label="联系电话:" label-position="left" prop="phone">
              <el-input
                v-model="form.phone"
                autocomplete="off"
              />
            </el-form-item>
            <button>马上提交开启财富之路</button>
          </el-form>
          <div class="phone clearfix">
            <img class="left" src="../../../../assets/img/template-item2/icons/zhaoshangjiameng_icon_kefu.png" alt="">
            <h6>招商热线</h6>
            <span>111-222-333-444</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Join',
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      onTouch: false,
      form: {
        name: '',
        phone: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    showTouch() {
      if (!this.onTouch) {
        this.onTouch = true
      } else {
        this.onTouch = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../assets/template-item2/css/base';

.join{
   margin-top: 60px;
  .join-title{
    @include home-title;
  }
  .join-body{
    margin-top: 40px;
    .join-step{
      width: 1200px;
      height: 132px;
      margin-bottom: 5px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .recommend{
      width: 850px;
      h2{
        font-size:26px;
        text-align: center;
        font-weight:bold;
        line-height:35px;
      }
      .recommend-brand{
        width: 100%;
        .brand{
          width: 170px;
          height: 96px;
          padding: 6px 10px;
          border: 1px solid #ccc;
          margin: 5px 0;
          img{
            width: 150px;
            height: 84px;
          }
        }
        .virtual{
          margin: 5px 0;
          width: 170px;
          height: 96px;
          padding: 6px 10px;
          border: 1px solid #ccc;
          text-align: center;
          box-sizing: border-box;
          img{
            width: 130px;
            height: 34px;
            margin-top: 28px;
          }
          .touch{
            background: url('../../../../assets/img/template-item2/icons/88.png') no-repeat;
            width: 170px;
            height: 96px;
            position: relative;
            top: -71px;
            left: -11px;
            text-align: center;
            p{
              padding: 20px 0px;
              font-size:16px;
              font-weight:600;
              line-height:21px;
              color:#fff;
            }
            span{
              font-size:20px;
              font-weight:600;
              line-height:27px;
              color:#fff;
            }
          }
        }
      }
      button{
        width: 100%;
        height: 48px;
        background-color: #F8F8F8;
        color: #787878;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        font-weight:600;
      }
    }
    .line{
      width: 338px;
      height: 400px;
      border: 1px solid #ECECEC;
      p{
        width: 100%;
        height: 82px;
        text-align: center;
        line-height: 82px;
        font-size:26px;
        font-family:BDZongYi-A001 FZZongYi-M05S	Arial;
        font-weight:normal;
        border-bottom: 1px solid #ECECEC;
      }
      .treasure{
        width: 100%;
        height: 318px;
        padding: 12px;
        position: relative;
        button{
          width:312px;
          height:38px;
          background:#DC3535;
          border-radius:4px;
          font-size:18px;
          font-weight:600;
          color: #fff;
        }
        .phone{
          background-color: #ECECEC;
          width:312px;
          height:110px;
          border:1px solid rgba(236,236,236,1);
          border-radius:6px;
          margin-top: 15px;
          img{
            margin: 30px 20px;
          }
          h6{
            margin-top: 35px;
            font-size:22px;
            font-weight:600;
            color: #787878;
            margin-bottom: 10px;
          }
          p{
            font-size:24px;
            font-weight:600;
            line-height:32px;
          }
        }
      }
    }
  }
}
</style>

